<template>
  <div class="app-container">
    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="6"><el-input v-model="req._name_" type="text" placeholder="请输入路线名称" @change="getList"></el-input></el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-table :data="list" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column prop="name" label="路线名称" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="type" label="类型" min-width="120" align="left" show-overflow-tooltip>
        <template slot-scope="{row}">
            {{row.category == 'ROAD'?'道路':row.category == 'RIVER'?'河道':'--'}}
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="权重" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="area" label="面积" min-width="120" align="left" show-overflow-tooltip :formatter="e=> (e.area||'--')+'㎡'"></el-table-column>
      <el-table-column prop="type" label="类型" min-width="80" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.type == 1 ? '考勤点' : '考勤面' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="radius" label="范围" min-width="120" align="left" show-overflow-tooltip></el-table-column>
      <el-table-column prop="enabled" label="状态" min-width="80" align="left" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span>{{ row.enabled == 1 ? '启用' : '禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="{ row }">
          <el-button @click="edit(row)" type="text" size="small">编辑</el-button>
          <el-button @click="del(row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total" :total="total" :page.sync="req.page" :limit.sync="req.pageSize" @pagination="getList">
    </Pagination>

    <!-- 弹窗 -->
    <Edit :show.sync="showEdit" :item="current" @change="getList"></Edit>
  </div>
</template>

<script>
import Edit from "./components/edit.vue";

import { roadList, roadDel } from "@/api/checkRoad";
export default {
  name: "Road",
  components: {
    Edit,
  },
  data() {
    return {
      showEdit: false,
      current: null,
      list: [],
      total: 0,
      req: {
        _name_: null,
        orderBy: "id desc",
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      roadList(this.req).then((res) => {
        this.list = res.data || [];
        this.total = res.total;
      });
    },
    // 添加
    add() {
      this.current = {};
      this.showEdit = true;
    },
    // 删除
    del(row) {
      this.$modal.confirm("确定删除此条数据吗？").then((res) => {
        // 请求服务器删除数据
        roadDel({
          id: row.id,
        }).then((res) => {
          // 刷新数据
          this.getList();
        });
      });
    },
    // 修改
    edit(row) {
      this.current = JSON.parse(JSON.stringify(row));
      this.showEdit = true;
    },
  },
};
</script>
